<template>
    <div class="explore_container_template">
        <head-top signin-up='home' @signUpHandler="signUpHandlerCallback" @loginInHandler="loginInHandlerCallback">
        </head-top>
        <header id="main" class="explore-header-image">
            <h1 class="exploreHeader-title">Explore</h1>
            <h2 class="exploreHeader-subTitle">Fund or buy innovations in tech, design, and more</h2>
        </header>


        <feature-slide></feature-slide>


        <div class="main-container">
            <div class="search-filter-area">
                <h2>Filter results</h2>
                <div class="category">
                    <div class="header">
                        category
                    </div>

                    <div class="content">
                        <el-menu
                                default-active="1"
                                class="el-menu-vertical-demo"
                                @select="handleSelect"
                                @open="handleOpen"
                                @close="handleClose">

                            <el-menu-item index="1">
                                <span slot="title">All Categories</span>
                            </el-menu-item>

                            <el-submenu index="2">
                                <template slot="title">
                                    <span>Tech & Innovation</span>
                                </template>
                                <el-menu-item index="Audio">Audio</el-menu-item>
<!--                                <el-menu-item index="Camera Gear">Camera Gear</el-menu-item>-->
<!--                                <el-menu-item index="Education">Education</el-menu-item>-->
                                <el-menu-item index="Energy & Green Tech">Energy & Green Tech</el-menu-item>
                                <el-menu-item index="Fashion & Wearables">Fashion & Wearables</el-menu-item>
                                <el-menu-item index="Food & Beverages">Food & Beverages</el-menu-item>
                                <el-menu-item index="Health & Fitness">Health & Fitness</el-menu-item>
                                <el-menu-item index="Phones & Accessories">Phones & Accessories</el-menu-item>
                                <el-menu-item index="Productivity">Productivity</el-menu-item>
<!--                                <el-menu-item index="Transportation">Transportation</el-menu-item>-->
                                <el-menu-item index="Travel & Outdoors">Travel & Outdoors</el-menu-item>

                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">
                                    <span>Creative Works</span>
                                </template>
                                <el-menu-item index="Art">Art</el-menu-item>
                                <el-menu-item index="Comics">Comics</el-menu-item>
                                <el-menu-item index="Dance & Theater">Dance & Theater</el-menu-item>
                                <el-menu-item index="Film">Film</el-menu-item>
                                <el-menu-item index="Music">Music</el-menu-item>
<!--                                <el-menu-item index="Photography">Photography</el-menu-item>-->
<!--                                <el-menu-item index="Podcasts, Blogs & Vlogs">Podcasts, Blogs & Vlogs</el-menu-item>-->
<!--                                <el-menu-item index="Tabletop Games">Tabletop Games</el-menu-item>-->
                                <el-menu-item index="Video Games">Video Games</el-menu-item>
                                <el-menu-item index="Web Series & TV Shows">Web Series & TV Shows</el-menu-item>
                                <el-menu-item index="Writing & Publishing">Writing & Publishing</el-menu-item>

                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title">
                                    <span>Community Projects</span>
                                </template>
                                <el-menu-item index="Culture">Culture</el-menu-item>
                                <el-menu-item index="Environment">Environment</el-menu-item>
                                <el-menu-item index="Human Rights">Human Rights</el-menu-item>
                                <el-menu-item index="Local Businesses">Local Businesses</el-menu-item>
<!--                                <el-menu-item index="Wellness">Wellness</el-menu-item>-->
                            </el-submenu>

                        </el-menu>
                    </div>
                </div>
                <div class="seperator"></div>
                <div class="category">
                    <div class="header">
                        PROJECT TIMING
                    </div>

                    <div class="content">
                        <div class="time-filter">
                            <div class="item">
                                <el-radio :label="1" v-model="timeOrder">All</el-radio>
                            </div>
                            <div class="item">
                                <el-radio :label="2" v-model="timeOrder">Just launched</el-radio>
                            </div>
                            <div class="item">
                                <el-radio :label="3" v-model="timeOrder">Ending soon</el-radio>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div class="query-result-area">

                <!--第一阶段隐藏-->
                <!--<div class="project-filter">
                    <div class="block">
                        <span class="divide-tip">Investment Required</span>
                        <el-slider v-model="investmentFilter" :format-tooltip="formatTooltip"></el-slider>
                    </div>
                    <div class="block">
                        <span class="divide-tip">Equity Offered</span>
                        <el-slider v-model="equityFilter" :format-tooltip="formatTooltip"></el-slider>
                    </div>
                    <div class="block">
                        <span class="divide-tip">Investors So Far</span>
                        <el-slider v-model="investorFilter" :format-tooltip="formatTooltip"></el-slider>
                    </div>
                    <div class="block">
                        <span class="divide-tip">Investment Raised So Far</span>
                        <el-slider v-model="raisedFilter" :format-tooltip="formatTooltip"></el-slider>
                    </div>
                </div>-->


                <div class="search-form">
                    <el-input placeholder="Search for campaign" prefix-icon="el-icon-search" :clearable="true"
                              v-model="queryText"
                              class="input-query">
                    </el-input>
                    <el-button type="primary" class="query-button" @click="searchContentHandler">Search</el-button>
                </div>
                <div class="query-result">
                    <el-row :gutter="20">
                        <el-col :span="8" v-for="(item, index) in fundingItem" :key="index" class="single-funding-item">
                            <funding-item :fundingItem="item"></funding-item>
                        </el-col>
                    </el-row>
                </div>
                <div class="page-helper" style="text-align: center;margin-bottom: 26px;" v-if="totalCount > 12">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            background
                            layout="prev, pager, next"
                            :page-size="12"
                            :total="totalCount">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import headTop from 'components/header/head'
    import FundingItem from 'components/common/fundingItem'
    import FeatureSlide from '@/page/project/featureSlide'
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {saveUserLog} from '@/api/log'


    import {
        apiGetAllCampaign,
        apiGetAllCampaignByCreate,
        apiGetAllCampaignByEnd,
        apiGetAllCampaignByContent
    } from '@/api/campaign'

    export default {
        data() {
            return {
                timeOrder: 1,
                fundingItem: [],
                queryText: "",
                totalCount: 0,
                investmentFilter: 66,
                equityFilter: 27,
                investorFilter: 39,
                raisedFilter: 41,
                logScroll: false
            }
        },

        async mounted() {

            this.initLoad()

        },
        created() {
            window.addEventListener('scroll', this.handleScroll);
        },

        components: {
            headTop,
            FundingItem,
            FeatureSlide
        },

        computed: {
            ...mapState({
                'userId': state => state.user.userId
            }),
            totalPageSize() {
                return this.totalPage
            }
        },
        watch: {
            timeOrder(newVal) {


                var tip = {
                    operation: "project timing click",
                    params: JSON.stringify({"userId":this.userId})

                }

                saveUserLog(tip);

                switch (newVal) {
                    case 1:
                        this.loadByDefault()
                        break;
                    case 2:
                        this.loadByCreateTime()
                        break;
                    case 3:
                        this.loadByEndTime()
                        break;
                }
            },
        },

        methods: {
            handleScroll(e) {
                console.log("scoll exploer page")
                if (!this.logScroll) {
                    let totalHeight = $("#app").height();
                    let windowScroll = $(window).scrollTop();
                    if (windowScroll > (totalHeight * 0.5)) {
                        console.log("log explorer page")
                        this.logScroll = true
                        var tip = {
                            operation: "Scroll campaign list",
                            params: JSON.stringify({"userId":this.userId || 999999})

                        }

                        saveUserLog(tip);
                    }
                }

            },
            handleOpen() {

            },
            handleClose() {

            },
            async handleSelect(key, keyPath) {

                var tip = {
                    operation: "click category",
                    params: JSON.stringify({"category": key})

                }

                saveUserLog(tip);


                var that = this

                if (1 != key) {
                    var params = {
                        userId: this.userId,
                        page: 1,
                        category: encodeURIComponent(key)
                    }
                } else {
                    var params = {
                        userId: this.userId,
                        page: 1,
                    }
                }


                var res = await  apiGetAllCampaign(params)
                // 如果查询成功
                that.fundingItem = res.page.list;
                that.totalCount = res.page.totalCount

            },
            async searchContentHandler() {
                this.initLoad()
            },
            async initLoad() {
                var that = this

                var tempText = this.queryText || ""

                if ("" != tempText) {

                    var tip = {
                        operation: "keyword search",
                        params: JSON.stringify({"queryText": this.queryText})
                    }

                    saveUserLog(tip);
                }


                var params = {
                    userId: this.userId,
                    page: 1,
                    content: this.queryText
                }

                var res = await  apiGetAllCampaign(params)
                // 如果查询成功
                that.fundingItem = res.page.list;
                that.totalCount = res.page.totalCount


                /* apiGetAllCampaignByContent("friend").then((res) => {
                     console.log(res)
                 })*/


            },
            async loadByDefault() {
                var that = this

                var params = {
                    userId: this.userId,
                    page: 1
                }

                var res = await  apiGetAllCampaign(params)
                // 如果查询成功
                that.fundingItem = res.page.list;
                that.totalCount = res.page.totalCount
            },
            async loadByCreateTime() {
                var that = this

                var params = {
                    userId: this.userId,
                    page: 1
                }

                var res = await  apiGetAllCampaignByCreate(params)
                // 如果查询成功
                that.fundingItem = res.page.list;
                that.totalCount = res.page.totalCount
            },
            async loadByEndTime() {
                var that = this

                var params = {
                    userId: this.userId,
                    page: 1
                }

                var res = await  apiGetAllCampaignByEnd(params)
                // 如果查询成功
                that.fundingItem = res.page.list;
                that.totalCount = res.page.totalCount
            },
            formatTooltip(val) {
                return 66;
            },
            //点击图标刷新页面
            reload() {
                window.location.reload();
            },
            signUpHandlerCallback() {

            },
            loginInHandlerCallback() {

            },
            getPage() {
                return this.totalPage
            },
            async handleCurrentChange(val) {
                var that = this

                var tip = {
                    operation: "Page turning in campaign list",
                    params: JSON.stringify({"page": val})

                }

                saveUserLog(tip);


                var params = {
                    userId: this.userId,
                    page: val
                }

                var res = await  apiGetAllCampaign(params)

                // 如果查询成功
                that.fundingItem = res.page.list;
            }

        },
        beforeRouteLeave(to, from, next) {
            window.removeEventListener('scroll', this.handleScroll);
            next();
        }
    }

</script>

<style lang="scss">
    @import '../../style/mixin';

    .head_logo {
        left: 0.4rem;
        font-weight: 400;
        @include sc(0.7rem, #fff);
        @include wh(2.3rem, 0.7rem);
        @include ct;
    }

    .explore_container_template {
        .siteLogo {
            svg {
                height: 24px;
                width: 160px;
                fill: #EB1478;
            }
        }

        .explore-header-image {
            background-size: cover;
            background: url('/static/img/ex6.png') no-repeat center;
            height: 240px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            h1 {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 48px;
                font-weight: normal;
                line-height: 48px;
                text-align: center;
                color: white;
            }
            h2 {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 24px;
                line-height: 34px;
                font-weight: normal;
                color: white;
            }
        }

        .main-container {
            display: flex;
            margin: 0 !important;
            .search-filter-area {
                width: 266px;
                text-align: center;
                h2 {
                    color: #2a2a2a;
                    font-family: "Benton Sans Medium";
                    font-size: 16px;
                    font-weight: normal;
                    line-height: 26px;
                    letter-spacing: 0;
                    padding: 30px 0px 30px 0px;
                }
                .seperator {
                    width: 190px;
                    height: 2px;
                    background-color: #dddddd;
                    margin-top: 26px;
                    margin-bottom: 26px;
                    margin-left: 66px;
                }
                .category {
                    .header {
                        font-family: "Benton Sans Medium";
                        font-size: 12px;
                        font-weight: normal;
                        line-height: 18px;
                        letter-spacing: 0;
                        letter-spacing: 0.86px;
                        margin-bottom: 15px;
                        text-transform: uppercase;
                        color: #a8a8a8;
                    }
                    .content {
                        .el-menu {
                            background: transparent;
                        }
                        .time-filter {
                            text-align: left;
                            .item {
                                margin-left: 76px;
                                margin-top: 16px;
                            }
                        }
                    }

                }

            }

            .query-result-area {
                flex: 1;
                .search-form {
                    display: flex;
                    margin-top: 36px;
                    margin-left: 6px;
                    .input-query {
                        width: 80%;
                    }
                    .query-button {
                        margin-left: 26px;
                    }
                }
                .query-result {
                    width: 962px;
                    margin: 26px;
                }
                .single-funding-item {
                    padding: 0 20px;
                }

                .project-filter {
                    position: relative;
                    display: flex;
                    .block {
                        width: 20%;
                        margin-right: 26px;
                        margin-top: 26px;
                        .divide-tip {

                        }
                    }
                }

            }

        }

    }

    .is-dark {
        span {
            color: white !important;
        }
    }

</style>
